<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>WebSocket 101</title>
    <link rel="stylesheet" href="css/stylesheet.css" type="text/css"/>   
    <script type="text/javascript">
      
  var URI_SUFFIX = "/websocket-101/ws-101-app";
  var ws; 
  var connectionStatus = "Connecting...";
  var calledBy = document.location.toString();
  var machine, port, secured;
  var regExp = new RegExp("(http|ws)(.?):[/]{2}([^/|^:]*):?(\\d*)/(.*)");  
  var matches = regExp.exec(calledBy);
//scheme  = matches[1];
  secured = matches[2];
  machine = matches[3];
  port    = matches[4];
//query   = matches[5];

  var reset = function() // Reset the screen
  {
    contentFld.innerHTML = "";
  };

  var resetStatus = function()
  {
    statusFld.innerHTML = "";
  };
      </script>    
      <script type="text/javascript" src="chat.client.js"></script> <!-- Application definition -->
      <script type="text/javascript">
  /*
   * Init the App here
   */
  var contentFld, inputFld, statusFld, promptFld;

  window.onload = function()
  {
    contentFld = document.getElementById('content');
    inputFld   = document.getElementById('input');
    statusFld  = document.getElementById('status');
    promptFld  = document.getElementById('prompt');

    try
    {
      var wsURI = "ws" + secured + "://" + machine + ":" + port + URI_SUFFIX;
      var config = setConfig();
      if (config === undefined)
        ws = new WebSocket(wsURI);
      else
        ws = new WebSocket(wsURI, config);
    }
    catch (err)
    {
      var mess = 'WebSocket creation error:';
      if (err.message !== undefined)
        mess += err.message;
      else
        mess += JSON.stringify(err);
      connectionStatus = "<font color='red'>Enable to connect.</font>";
      if (statusFld !== undefined)
        statusFld.innerHTML = mess;
      else
        alert(mess);
    }
    init(); // in app.js
    promptFld.innerHTML = connectionStatus;
  };
  
  var setConfig = function()
  {
    var config, enforceTransport, debugLevel;
    calledBy = document.location.toString();
    if (calledBy.indexOf('?') > -1)
    {
      var queryString = calledBy.substring(calledBy.indexOf('?') + 1);
      var nvPair = queryString.split("&");
      for (var i=0; i<nvPair.length; i++)
      {
        if (nvPair[i].indexOf('=') > -1)
        {
          var nv = nvPair[i].split('=');
          if ("transport" === nv[0])
            enforceTransport = nv[1];
          if ("debug" === nv[0])
            debugLevel = parseInt(nv[1]);
        }
      }
      if (enforceTransport !== undefined || debugLevel !== undefined)
      {
        config = {};
        if (enforceTransport !== undefined)
          config.transport = enforceTransport;
        if (debugLevel !== undefined)
          config.debug = debugLevel;
      }
    }
    return config;
  };
    </script>
  </head>
  <body>
    <table width="100%">
      <tr>
        <td valign="top"><h2>WebSocket 101</h2></td>
        <td align="right" valign="bottom"><a href="" onclick="javascript:reset(); return false;" title="Clear messages"><small>Reset</small></a></td>
      </tr>
      <tr>
        <td valign="top" colspan="2">
          <div id="content" style="padding:5px; background:#ddd; border-radius:5px; overflow-y: scroll; border:1px solid #CCC; margin-top:10px; height: 160px;"></div>
        </td>
      </tr>
      <tr>
        <td align="left" colspan="2">
          <div id="prompt" style="width:200px; display:block; float:left; margin-top:15px;">Connecting...</div>
          <input type="text" id="input" style="border-radius:2px; border:1px solid #ccc; margin-top:10px; padding:5px; width:400px;" placeholder="Type your message here"/>
          <button onclick="javascript:send(document.getElementById('input').value);">Send</button>
        </td>
      </tr>
      <tr>
        <td align="left" colspan="2">
          <div id="status" style="padding:5px; background:#ddd; border-radius:5px; overflow-y: scroll; border:1px solid #CCC; margin-top:10px; height: 80px;">
              <i>Status will go here when needed...</i>
          </div>
        </td>
      </tr>
      <tr>
        <td valign="top" align="right" colspan="2"><a href="" onclick="javascript:resetStatus(); return false;" title="Clear status board"><small>Reset Status</small></a></td>
      </tr>
    </table>  
    <hr>
  </body>
</html>
